<template>
  <div class="login">
    <div class="login-box">
      <div class="form">
        <div class="content">
          <el-form @keyup.enter="onSubmit(formRef)" ref="formRef" :rules="rules" size="large" :model="form">
            <el-form-item prop="username">
              <el-input type="text" clearable v-model="form.username">
                <template #prefix> </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" type="password" show-password>
                <template #prefix> </template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <div style="width: 100%">
                <el-row :gutter="4">
                  <el-col :span="5">
                    <span>社交登录：</span>
                  </el-col>
                  <el-col :span="6">
                    <div>qq图标</div>
                  </el-col>
                  <el-col :span="6">
                    <div>weibo登录</div>
                  </el-col>
                  <el-col :span="6">
                    <div>gitee登录</div>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button :loading="form.loading" class="submit-button" round type="primary" size="large" @click="onSubmit(formRef)"> 登录 </el-button>
              <el-button :loading="form.loading" class="submit-button" round type="primary" size="large" @click="reg()"> 注册 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import store from '@/store/index.js'

const router = useRouter()

const form = reactive({
  username: 'xin',
  password: '',
  loading: false
})
new Map()

const rules = reactive<FormRules>({
  username: [{ required: true, message: '请填写', trigger: 'blur' }],
  password: [{ required: true, message: '请填写', trigger: 'blur' }]
})

const formRef = ref<FormInstance>()

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store
        .dispatch('user/login', form)
        .then((result) => {
          router.push('/u/home')
        })
        .catch((err) => {})
      // login(form).then((result) => {
      //   store.state.user.token = result.token
      //   console.log(result)
      // }).catch((err) => {
      // });
      // form.loading = true
      console.log('submit!')
    } else {
      // const token = store.getters.

      console.log('检验失败', fields, store)
    }
  })
}

const reg = () => {
  console.log('reg')
}
</script>

<style scoped>
.login {
  position: absolute;
  top: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: flex-start;
  justify-content: center;
}

.login-box {
  overflow: hidden;
  width: 430px;
  padding: 0;
  background: #fff;
  margin-top: 130px;
}
.submit-button {
  width: 100%;
  letter-spacing: 2px;
  font-weight: 300;
  margin-top: 15px;
}
</style>
